﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="CurrData.Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>Index </title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />

    <link href="/js/kd/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="/js/kd/styles/kendo.blueopal.min.css" rel="stylesheet" />
    <link href="/js/fa/css/font-awesome.min.css" rel="stylesheet" />
    <link href="/js/site.css?t=20221031" rel="stylesheet" />

    <script src="/js/kd/jquery.min.js"></script>
    <script src="/js/kd/kendo.web.min.js"></script>

    <script src="/js/kd/cultures/kendo.culture.zh-CN.min.js"></script>
    <script src="/js/kd/messages/kendo.messages.zh-CN.min.js"></script>
    <script src="/js/kd/jszip.min.js"></script>


    <script src="/js/kendo_stdefine.js"></script>
    <script src="/js/site50.js"></script>
    <script src="/js/xlsx.full.min.js?t=1"></script>


</head>
<body>


    <div id="divSplitter" data-role="splitter"
         data-panes="[
                { collapsible: false, resizable: false,  size: '245px' },
                { collapsible: false, resizable: false }
             ]"
         style="">
        <div id="left-pane" style="overflow:hidden;overflow-y:auto;">
            <div id="toolbarCenter" style="height:40px;line-height:40px;margin-bottom:2px;border-bottom: 1px solid #23549C;background:#14346a;font-family:'Microsoft YaHei'" class="flexrow">
                <div style="flex:1;margin-left:14px;font-size:14px">
                    采集器
                </div>

                <div style="width:20px;color:#5999D4;">
                    <a id="btnAdd" style="cursor:pointer;" title="添加" onclick="Add()"><i class="fa fa-lg fa-plus"></i></a>
                </div>

                <div style="width:20px;color:#5999D4;">

                </div>
                <div style="width:20px;color:#5999D4;">
                    <a id="btnAddHost" style="cursor:pointer;" title="添加主机" onclick="AddSimHost()"><i class="fa fa-lg fa-address-book-o"></i></a>
                </div>

                <div style="width:20px;color:#5999D4;">

                </div>
                <div style="width:20px;color:#5999D4;">
                    <a id="btnDelete" style="cursor:pointer;" title="删除" onclick="Delete()"><i class="fa fa-lg fa-trash"></i></a>
                </div>




            </div>
            <div id="treeview"
                 data-role="treeview"
                 data-drag-and-drop="false"
                 data-text-field="text"
                 data-id-field="id"
                 data-spritecssclass-field="imageurl"
                 data-bind="source: treeData,
                    events: { change: treeNodeChange }"
                 style="flex-wrap: wrap;overflow-x:hidden;overflow-y:auto ;height:calc( 100% - 45px)">

            </div>

        </div>

        <div id="center" style="overflow: hidden;overflow-y:auto; ">



        </div>


    </div>




    <script>
        var viewModel = new kendo.data.ObservableObject({
            treeNodeChange: function (e) {
                var treeView = $("#treeview").data("kendoTreeView");
                var nodedata = treeView.dataItem(treeView.select());
                if (!nodedata) {
                    $("#btnAdd").show();

                    $("#btnAddHost").hide();
                    $("#btnDelete").hide();
                    return;
                }



                switch (nodedata.attrs2) {
                    case "A":
                        ShowSimDetail(nodedata);
                        if (nodedata.attrs1 == "串口") {
                            $("#btnAddHost").show();
                            $("#btnDelete").show();
                        } else {
                            $("#btnAddHost").hide();
                            $("#btnDelete").show();
                        }


                        break;//第一级
                    case "B":
                        ShowSimHostDetail(nodedata);

                        var p = treeView.parent(treeView.select());
                        var pdata = treeView.dataItem(p);
                        if (pdata.attrs1 == "串口") {
                            if (pdata.items.length > 1) {
                                $("#btnDelete").show();
                            } else {
                                $("#btnDelete").hide();
                            }
                            $("#btnAddHost").hide();

                        } else {
                            $("#btnAddHost").hide();
                            $("#btnDelete").hide();

                        }

                        break;//第二级
                }
            },
            treeData: [],
        });
        var CurrData = {};
        function Init() {
            kendo.bind($("#divSplitter"), viewModel);

            GetTree("");

        }

        function GetTree(selid) {
            $("#center").html("");
            var tv = $("#treeview").data("kendoTreeView");

            myAjax({
                url: "/api/ProtocolSim/Tree",
                success: function (r) {

                    var ohy = kendo.observableHierarchy({
                        data: r.Data
                    });

                    viewModel.set("treeData", ohy);

                    if (selid) {

                        var di = tv.dataSource.get(selid);
                        var bar = tv.findByUid(di.uid);
                        tv.select(bar);
                    } else if (r.Data.length > 0) {
                        var selectedNode = tv.findByText(r.Data[0].text);
                        tv.select(selectedNode);
                    }

                }
            });
        };
        function ShowSimDetail(m) {
            ShowDetail(m);
        }


        function updown_Click(sender) {
            var obj = $(sender);
            var p = obj.closest(".divtitle");

            if (obj.hasClass("fa-chevron-up")) {
                obj.removeClass("fa-chevron-up");
                obj.addClass("fa-chevron-down");
                var nextElement = p[0].nextElementSibling; // 获取p的同级下一个元素

                $(nextElement).toggle();
            } else {
                obj.removeClass("fa-chevron-down");
                obj.addClass("fa-chevron-up");
                var nextElement = p[0].nextElementSibling; // 获取p的同级下一个元素
                $(nextElement).toggle();
            }
        }
        function Delete() {
            var treeView = $("#treeview").data("kendoTreeView");
            var nodedata = treeView.dataItem(treeView.select());
            if (!nodedata) {
                
                return;
            }



            switch (nodedata.attrs2) {
                case "A":
                    DeleteSim(nodedata);
                    break;
                case "B":
                    DeleteSimHost(nodedata);
                    break;
            }
        }
    </script>

    <style>
        .divtitle {
            height: 30px;
            background: #18477f80 !important;
            margin-top: 10px;
        }
    </style>
    <!--基本信息-->
    <script>
        function ShowDetail(nodedata) {
            myAjax({
                url: "/api/ProtocolSim/Detail",
                data: { Id: nodedata.id },
                success: function (r) {
                    CurrData = r.Data;

                    $.get('/ProtocolSim/Detail.html', function (html) {
                        var template = kendo.template(html);
                        var productPreviewHtml = template(CurrData);
                        $("#center").html(productPreviewHtml)
                    });


                }
            })
        }
        function Add() {

            var opt = myGetTop().GetFullWH(); 
            var w = Math.min(opt.w - 100, 600);
            var h = Math.min(opt.h - 100, 400);
            var url = "/ProtocolSim/Add.html?t=" + Math.random();
            myWindowOpen({
                title: "添加采集器"
                , url: url
                , width: w
                , height: h
                , isMaxH: false
                , onload: function (win) {
                    win.IsAdd = true;
                    win.setData({
                        m: {
                            Id: "0",
                            Name: "",

                            ProtocolDefineId: 0,
                            ProtocolName: "",

                            Mode: "TCP",
                            IP:"127.0.0.1",
                            Port: "9011",

                            ComPort: "COM1",
                            BaudRate: 9600,
                            Parity: "None",
                            DataBits: 8,
                            StopBits: "One",

                            HostId: 1,


                        }
                    });

                    win.onOk = function (m) {
                        AddSave(m);
                    }
                    myFocus(win);
                }
                , onclosed: function (win) {
                }
                , success: function (m) {
                }
            });
        }
        function AddSave(data) {
            myAjax({
                url: "/api/ProtocolSim/Add",
                data: data,
                success: function (r) {
                    myWindowClose();
                    GetTree(r.Data.Id)
                }
            })
        }

        function Edit() {
            var opt = myGetTop().GetFullWH();
            var w = Math.min(opt.w - 100, 600);
            var h = Math.min(opt.h - 100, 400);

            var treeView = $("#treeview").data("kendoTreeView");
            var di = treeView.dataItem(treeView.select());
            if (!di) {
                return;
            }
            var m = CurrData


            var url = "/ProtocolSim/Edit.html?t=" + Math.random();
            myWindowOpen({
                title: "修改采集器"
                , url: url
                , width: w
                , height: h
                , isMaxH: false
                , onload: function (win) {
                    win.IsAdd = false;
                    win.setData({ m: m });

                    win.onOk = function (m) {
                        EditSave(m);
                    }
                    myFocus(win);
                }
                , onclosed: function (win) {
                }
                , success: function (m) {
                }
            });
        }
        function EditSave(data) {
            myAjax({
                url: "/api/ProtocolSim/Edit",
                data: data,
                success: function (r) {
                    myWindowClose();
                    GetTree(r.Data.Id)
                }
            })
        }

        function DeleteSim(data) { 
            myConfirm({
                message: `确定要删除采集器 ${data.text} 吗？`,
                done: function () {
                    myAjax({
                        url: "/api/ProtocolSim/Delete",
                        data: data.toJSON(),
                        success: function (r) {
                            GetTree()
                        }
                    })
                }
            });

        }


        function StartSim(id) {
            url = "/api/ProtocolSim/StartSim";
            myAjax({
                url: url,
                data: { Id: id },
                success: function (r) {

                    GetTree(r.Data.Id)
                }
            })
        }
        function StopSim(id) {
            url = "/api/ProtocolSim/StopSim";
            myAjax({
                url: url,
                data: { Id: id },
                success: function (r) {

                    GetTree(r.Data.Id)
                }
            })
        }
    </script>



    <!--主机信息-->
    <script>
        function ShowSimHostDetail(nodedata) {
            myAjax({
                url: "/api/ProtocolSimHost/Detail",
                data: { Id: nodedata.id },
                success: function (r) {
                    CurrData = r.Data;

                    $.get('/ProtocolSimHost/Detail.html', function (html) {
                        var template = kendo.template(html);
                        var productPreviewHtml = template(CurrData);
                        $("#center").html(productPreviewHtml)
                    });


                }
            })
        }
       
        function AddSimHost() {
            var m = CurrData;
            myAjax({
                url: "/api/ProtocolSimHost/InitAdd",
                data: {Id:m.Id},
                success: function (r) {
                    AddSimHostOpen(r.Data)
                }
            }) 
        }
        function AddSimHostOpen(m) {

            var opt = myGetTop().GetFullWH();
            var w = Math.min(opt.w - 100, 600);
            var h = Math.min(opt.h - 100, 600);
            var url = "/ProtocolSimHost/Add.html?t=" + Math.random();
            myWindowOpen({
                title: "添加主机"
                , url: url
                , width: w
                , height: h
                , isMaxH: false
                , onload: function (win) {
                    win.IsAdd = true;
                    win.setData({
                        m:  m
                    });

                    win.onOk = function (m) {
                        AddSimHostSave(m);
                    }
                    myFocus(win);
                }
                , onclosed: function (win) {
                }
                , success: function (m) {
                }
            });
        }
        function AddSimHostSave(data) {
            myAjax({
                url: "/api/ProtocolSimHost/Add",
                data: data,
                success: function (r) {
                    myWindowClose();
                    GetTree(r.Data.Id)
                }
            })
        }

        function EditSimHost() {
            var opt = myGetTop().GetFullWH();
            var w = Math.min(opt.w - 100, 600);
            var h = Math.min(opt.h - 100, 600);


            var treeView = $("#treeview").data("kendoTreeView");
            var di = treeView.dataItem(treeView.select());
            if (!di) {
                return;
            }
            var m = CurrData


            var url = "/ProtocolSimHost/Add.html?t=" + Math.random();
            myWindowOpen({
                title: "修改采集器"
                , url: url
                , width: w
                , height: h
                , isMaxH: false
                , onload: function (win) {
                    win.IsAdd = false;
                    win.setData({ m: m });

                    win.onOk = function (m) {
                        EditHostSave(m);
                    }
                    myFocus(win);
                }
                , onclosed: function (win) {
                }
                , success: function (m) {
                }
            });
        }
        function EditHostSave(data) {
            myAjax({
                url: "/api/ProtocolSimHost/Edit",
                data: data,
                success: function (r) {
                    myWindowClose();
                    GetTree(r.Data.Id)
                }
            })
        }

        function DeleteSimHost(data) {
            myConfirm({
                message: `确定要删除主机 ${data.text} 吗？`,
                done: function () {
                    myAjax({
                        url: "/api/ProtocolSimHost/Delete",
                        data: data.toJSON(),
                        success: function (r) {
                            GetTree()
                        }
                    })
                }
            });

        } 
    </script>

    <script>
        var SizeInfo;
        $(function () {

            kendo.culture("zh-CN");


            if (window.Init) {
                Init();
            }
        });
        function After50(d) {
            if (d) {
                setTimeout(function () { d(); }, 50);
            }
        }
    </script>
</body>
</html>
